<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="chart-name" content="分组柱状图">
  <title>F2 图表组件库 - AntV</title>
  <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />

</head>
<style>
    .html {
        height: 600px;
    }
    .chart-wrapper{
      /* height: 500px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
        overflow-y: scroll; */
    }
</style>

<body>
  <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>

  <script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.4.2/f2.min.js"></script>

  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
  <!-- 在 PC 上模拟 touch 事件 -->
  <script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>

  <div class="chart-wrapper">
    <a href="https://hr-x.pingan.com.cn/questionReport/index.html?questionnaireCode=9d91cd0b6e26ac52016f5b6d07de322b" target="_self">跳转快乐平安i</a>
    <canvas id="mountNode"></canvas>
    <div class="html"></div>
    <canvas id="mountNode2"></canvas>
    <canvas id="mountNode3"></canvas>
  </div>
  <script>
    var data = [{
      name: 'London',
      月份: 'Jan.',
      月均降雨量: 18.9
    }, {
      name: 'London',
      月份: 'Feb.',
      月均降雨量: 28.8
    }, {
      name: 'London',
      月份: 'Mar.',
      月均降雨量: 39.3
    }, {
      name: 'London',
      月份: 'Apr.',
      月均降雨量: 81.4
    }, {
      name: 'London',
      月份: 'May.',
      月均降雨量: 47
    }, {
      name: 'London',
      月份: 'Jun.',
      月均降雨量: 20.3
    }, {
      name: 'London',
      月份: 'Jul.',
      月均降雨量: 24
    }, {
      name: 'London',
      月份: 'Aug.',
      月均降雨量: 35.6
    }, {
      name: 'Berlin',
      月份: 'Jan.',
      月均降雨量: 12.4
    }, {
      name: 'Berlin',
      月份: 'Feb.',
      月均降雨量: 23.2
    }, {
      name: 'Berlin',
      月份: 'Mar.',
      月均降雨量: 34.5
    }, {
      name: 'Berlin',
      月份: 'Apr.',
      月均降雨量: 99.7
    }, {
      name: 'Berlin',
      月份: 'May.',
      月均降雨量: 52.6
    }, {
      name: 'Berlin',
      月份: 'Jun.',
      月均降雨量: 35.5
    }, {
      name: 'Berlin',
      月份: 'Jul.',
      月均降雨量: 37.4
    }, {
      name: 'Berlin',
      月份: 'Aug.',
      月均降雨量: 42.4
    }];
    var chart = new F2.Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data);
    chart.tooltip({
      custom: true, // 自定义 tooltip 内容框
      onChange: function onChange(obj) {
        var legend = chart.get('legendController').legends.top[0];
        var tooltipItems = obj.items;
        var legendItems = legend.items;
        var map = {};
        legendItems.map(function (item) {
          map[item.name] = _.clone(item);
        });
        tooltipItems.map(function (item) {
          var name = item.name;
          var value = item.value;
          if (map[name]) {
            map[name].value = value;
          }
        });
        legend.setItems(_.values(map));
      },
      onHide: function onHide() {
        var legend = chart.get('legendController').legends.top[0];
        legend.setItems(chart.getLegendItems().country);
      }
    });

    chart.interval().position('月份*月均降雨量').color('name').adjust({
      type: 'dodge',
      marginRatio: 0.05 // 设置分组间柱子的间距
    });
    chart.render();
  </script>
  <script>
    var data = [{
      State: 'WY',
      年龄段: '小于5岁',
      人口数量: 25635
    }, {
      State: 'WY',
      年龄段: '5至13岁',
      人口数量: 1890
    }, {
      State: 'WY',
      年龄段: '14至17岁',
      人口数量: 9314
    }, {
      State: 'DC',
      年龄段: '小于5岁',
      人口数量: 30352
    }, {
      State: 'DC',
      年龄段: '5至13岁',
      人口数量: 20439
    }, {
      State: 'DC',
      年龄段: '14至17岁',
      人口数量: 10225
    }, {
      State: 'VT',
      年龄段: '小于5岁',
      人口数量: 38253
    }, {
      State: 'VT',
      年龄段: '5至13岁',
      人口数量: 42538
    }, {
      State: 'VT',
      年龄段: '14至17岁',
      人口数量: 15757
    }, {
      State: 'ND',
      年龄段: '小于5岁',
      人口数量: 51896
    }, {
      State: 'ND',
      年龄段: '5至13岁',
      人口数量: 67358
    }, {
      State: 'ND',
      年龄段: '14至17岁',
      人口数量: 18794
    }, {
      State: 'AK',
      年龄段: '小于5岁',
      人口数量: 72083
    }, {
      State: 'AK',
      年龄段: '5至13岁',
      人口数量: 85640
    }, {
      State: 'AK',
      年龄段: '14至17岁',
      人口数量: 22153
    }];
    var chart = new F2.Chart({
      id: 'mountNode2',
      pixelRatio: window.devicePixelRatio
    });

    chart.source(data, {
      '人口数量': {
        tickCount: 5
      }
    });
    chart.coord({
      transposed: true
    });
    chart.axis('State', {
      line: F2.Global._defaultAxis.line,
      grid: null
    });
    chart.axis('人口数量', {
      line: null,
      grid: F2.Global._defaultAxis.grid,
      label: function label(text, index, total) {
        var textCfg = {
          text: text / 1000 + ' k'
        };
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart.tooltip({
      custom: true, // 自定义 tooltip 内容框
      onChange: function onChange(obj) {
        var legend = chart.get('legendController').legends.top[0];
        var tooltipItems = obj.items;
        var legendItems = legend.items;
        var map = {};
        legendItems.map(function (item) {
          map[item.name] = _.clone(item);
        });
        tooltipItems.map(function (item) {
          var name = item.name;
          var value = item.value;
          if (map[name]) {
            map[name].value = value;
          }
        });
        legend.setItems(_.values(map));
      },
      onHide: function onHide() {
        var legend = chart.get('legendController').legends.top[0];
        legend.setItems(chart.getLegendItems().country);
      }
    });
    chart.interval().position('State*人口数量').color('年龄段').adjust('stack');

    chart.render();
  </script>
  <script>
    var data = [{
      amount: 20,
      ratio: 0.1,
      memo: '学习',
      const: 'const'
    }, {
      amount: 100,
      ratio: 0.5,
      memo: '睡觉',
      const: 'const'
    }, {
      amount: 10,
      ratio: 0.05,
      memo: '吃饭',
      const: 'const'
    }, {
      amount: 30,
      ratio: 0.15,
      memo: '讲礼貌',
      const: 'const'
    }, {
      amount: 10,
      ratio: 0.05,
      memo: '其他',
      const: 'const'
    }, {
      amount: 20,
      ratio: 0.1,
      memo: '运动',
      const: 'const'
    }, {
      amount: 10,
      ratio: 0.05,
      memo: '暂无备注',
      const: 'const'
    }];

    var chart = new F2.Chart({
      id: 'mountNode3',
      pixelRatio: window.devicePixelRatio
    });

    chart.source(data);
    chart.coord('polar', {
      transposed: true,
      innerRadius: 0.4,
      radius: 0.75
    });
    chart.axis(false);
    chart.legend({
      position: 'bottom',
      align: 'center'
    });
    chart.tooltip(false);
    chart.guide().html({
      position: ['50%', '50%'],
      html: '<div style="width: 100px;height: 20px;text-align: center;line-height: 20px;" id="textContent"></div>'
    });
    // 配置文本饼图
    chart.pieLabel({
      sidePadding: 75,
      label1: function label1(data) {
        return {
          text: data.memo,
          fill: '#808080'
        };
      },
      label2: function label2(data) {
        return {
          fill: '#000000',
          text: '$' + data.amount.toFixed(2),
          fontWeight: 500,
          fontSize: 10
        };
      }
    });
    chart.interval().position('const*ratio').color('memo', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273']).adjust('stack');
    chart.render();

    // 绘制内阴影
    var frontPlot = chart.get('frontPlot');
    var coord = chart.get('coord'); // 获取坐标系对象
    frontPlot.addShape('sector', {
      attrs: {
        x: coord.center.x,
        y: coord.center.y,
        r: coord.circleRadius * coord.innerRadius * 1.2, // 全半径
        r0: coord.circleRadius * coord.innerRadius,
        fill: '#000',
        opacity: 0.15
      }
    });
    chart.get('canvas').draw();
  </script>


</body>

</html>